<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<!-- 主界面菜单同时移动 -->
		<!-- 侧滑导航根容器 -->
		<div class="mui-off-canvas-wrap mui-draggable">
			<!-- 主页面容器 -->
			<div class="mui-inner-wrap">
				<!-- 菜单容器 -->
				<aside class="mui-off-canvas-left" id="offCanvasSide">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<!-- 菜单具体展示内容 -->
							<br /> &nbsp;&nbsp;&nbsp;

							<button id="logoff" type="button" class="mui-btn mui-btn-danger mui-btn-outlined">退出</button>
						</div>
					</div>
				</aside>
				<!-- 主页面标题 -->
				<header class="mui-bar mui-bar-nav">
					<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
					<h1 class="mui-title">标题</h1>
				</header>
				<nav class="mui-bar mui-bar-tab">
					<a class="mui-tab-item mui-active">
						<span class="mui-icon mui-icon-home"></span>
						<span class="mui-tab-label">首页</span>
					</a>
					<a class="mui-tab-item">
						<span class="mui-icon mui-icon-phone"></span>
						<span class="mui-tab-label">电话</span>
					</a>
					<a class="mui-tab-item">
						<span class="mui-icon mui-icon-email"></span>
						<span class="mui-tab-label">邮件</span>
					</a>
					<a class="mui-tab-item">
						<span class="mui-icon mui-icon-gear"></span>
						<span class="mui-tab-label">设置</span>
					</a>
				</nav>
				<!-- 主页面内容容器 -->
				<div class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 主界面具体展示内容 -->
						<br /> &nbsp;&nbsp;&nbsp;欢迎登陆！！！
						
						<ul class="mui-table-view" id="users">
							
						</ul>
					</div>
				</div>
				<div class="mui-off-canvas-backdrop"></div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/art-template.js"></script>
		<script type="text/javascript" charset="utf-8">
			(function($, doc, $$) {
				$.init();
				
				var url = 'http://47.105.181.78:8281/user/list';
				//var url = 'http://localhost:8281/user/list';
				var type = 'POST';
				var data = {
					
				};
				var dataType = 'jsonp';
				mui.ajax(url, {
					type: type,
					data: JSON.stringify(data),
					dataType: dataType,
					timeout: 1000,
					headers: {
						'Access-Control-Allow-Origin': '*',
						'Content-Type': 'application/json; charset=UTF-8'
					},
					success: function(data) {
						var arr = $.parseJSON(data); 
						var html = template('test', arr);
                        //把得到的 html 放到id为 zhihu 的 ul 标签里
                        doc.getElementById("users").innerHTML = html;
					},
					error: function(xhr, type, errorThrown) {
						mui.alert(type);
					}
				});
				
				$(".mui-scroll").on("tap", "#logoff", foo_1);
				function foo_1() {
					$.openWindow({
						url: 'login.html',
						id: 'login'
					});
				}
			}(mui, document, jQuery));
		</script>
		<script id="test" type="text/html">
             <%for (var i =0;i<list.length;i++){%>
                 <li class="mui-table-view-cell"><%=list[i].username%>-----<%=list[i].address%></li>
             <% } %>
	     </script>
	</body>
</html>